<template>
  <el-row :gutter="16">
    <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
      <shop :data="state.data" @changeRole="getData" :index="state.index" />
    </el-col>
    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
      <message />
    </el-col>
  </el-row>
</template>

<script setup>
  import shop from './shop.vue';
  import message from './message.vue';
  import { api } from '../../outline.service';
  import { reactive, onMounted } from 'vue';

  const state = reactive({
    data: {},
    index: null,
  });

  onMounted(() => {
    getStatus();
  });

  const getStatus = async () => {
    const statusMap = {
      ecommerce: 1,
      local_life: 2,
      takeaway: 3,
    };
    const { error, data } = await api.seller.status();
    // 判断那个状态是true 去请求哪个商家的详情信息
    if (error === 0) {
      state.data.status = data;
      for (const key in statusMap) {
        if (data[key] === true) {
          state.index = statusMap[key];
          return getData(statusMap[key]);
        }
      }
    }
  };

  const getData = async (type) => {
    state.index = type
    const { error, data } = await api.seller.info({ type: type });
    if (error === 0) {
      state.data.info = data;
    }
  };
</script>
